<template>
  <MrCustom bg-color="bg-gradual-blue " is-back>
    <template #backText>
      返回
    </template>
  </MrCustom>
  <view v-if="appointmentInfo" class="bg-white padding-bottom-lg">
    <view v-if="appointmentInfo.status===1">
      <view class="cu-bar radius-lg-top">
        <view class="action border-title">
          <text class="text-xl text-bold">就诊二维码</text>
          <text class="bg-grey" style="width:2rem"></text>
        </view>
      </view>
      <view class=" shadow shadow-lg bg-white margin-lr padding-xs radius-lg">
        <view class="flex flex-sub align-center flex-direction">
          <view class="qrcode">
            <canvas canvas-id="qrcode"/>
          </view>
          <view style="font-size: 12px;color: #aaaaaa">
            请凭此码到院就诊
          </view>
        </view>
      </view>
    </view>

    <view class="cu-bar radius-lg-top">
      <view class="action border-title">
        <text class="text-xl text-bold">预约信息</text>
        <text class="bg-grey" style="width:2rem"></text>
      </view>
    </view>
    <view class="shadow-warp bg-white margin-lr padding-lr padding-xs radius-lg">
      <view class="flex padding-tb-xs padding-left solid-bottom">
        <view class="text-gray" style="width: 25vw">预约状态：</view>
        <view class="text-black">{{ getAppointmentStatus(appointmentInfo.status) }}</view>
      </view>
      <view class="flex padding-tb-xs padding-left solid-bottom">
        <view class="text-gray" style="width: 25vw">就诊时间：</view>
        <view class="text-black">{{ getStartEndTimeString(appointmentInfo.appointmentTime) }}</view>
      </view>
      <view class="flex padding-tb-xs padding-left solid-bottom">
        <view class="text-gray" style="width: 25vw">预约类型：</view>
        <view class="text-black">{{ getAppointmentType(appointmentInfo.type) }}</view>
      </view>
      <view class="flex padding-tb-xs padding-left solid-bottom">
        <view class="text-gray" style="width: 25vw">创建时间：</view>
        <view class="text-black">{{ appointmentInfo.createTime }}</view>
      </view>
    </view>


    <view class="cu-bar foot bg-white"
          v-if="appointmentInfo.status===1||appointmentInfo.status===3||appointmentInfo.status===4">
      <view class="flex flex-sub justify-end">
        <button class="cu-btn lg margin-xs bg-red" v-if="appointmentInfo.status===1" @click="cancel(appointmentInfo)">
          取消
        </button>
        <button class="cu-btn margin-left bg-yellow" v-if="appointmentInfo.status===3"
                @click="toResult(appointmentInfo)">就诊结果
        </button>
        <view v-if="appointmentInfo.status===4">
          <button class="cu-btn margin-left bg-yellow" @click="toResult(appointmentInfo)">就诊结果</button>
          <button v-if="appointmentInfo.commentId" class="cu-btn margin-left bg-green">已评价</button>
          <button v-else class="cu-btn margin-left bg-green" @click="toAppraise(appointmentInfo)">立即评价</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {onLoad, onUnload} from "@dcloudio/uni-app";
import qrCode from './components/weapp-qrcode.js';
import {ref} from "vue";
import {getAppointmentStatus, getAppointmentType} from "@/utils/common/myStandard";
import {getStartEndTimeString} from "@/utils/common/myUtils";
import MrCustom from "@/components/common/MrCustom.vue";
import api from "@/api";


const appointmentInfo = ref()

onLoad((option) => {
  appointmentInfo.value = JSON.parse(decodeURIComponent(option.appointmentInfo))
  createQr(appointmentInfo.value.id)
})
onUnload(() => {
  let pages = getCurrentPages()
  let page = pages[pages.length - 2]
  page.$vm.pageReload()
})

/**
 * 取消预约
 * @param item
 */
const cancel = (item: any) => {
  console.log(item)
  uni.showModal({
    title: '提示',
    cancelText: '取消',
    confirmText: '确定',
    content: '您确定要取消预约？',
    success: function (res) {
      if (res.confirm) {
        api.appointment.cancelById({
              appointmentId: item.id,
              scheduleId: item.scheduleId
            }
        ).then(response => {
          if (response && response.data.code === 0) {
            item.status = 5
            uni.showToast({
              title: response.data.msg,
              icon: 'success',
            })
          }
        })
      }
    }
  })
}

/**
 * 查看结果
 */
const toResult = (item: any) => {
  uni.navigateTo({
    url: '/pages/nurse/appointment/handle/result?appointmentInfo=' + encodeURIComponent(JSON.stringify(item))
  })
}
/**
 * 评价
 */
const toAppraise = (item: any) => {
  uni.navigateTo({
    url: '/pages/patient/appointment/records/appraise?appointmentInfo=' + encodeURIComponent(JSON.stringify(item))
  })
}
const createQr = (text: any) => {
  console.log(text)
  new qrCode('qrcode', {
    text: text.toString(),
    width: 150,
    height: 150,
    colorDark: '#333333',
    colorLight: '#FFFFFF',
    correctLevel: qrCode.CorrectLevel.H
  });
}
</script>

<style scoped>

.qrcode {
  width: 150px;
  height: 150px;
  display: flex;
  margin: 5px 0;
}


</style>
